<template>
  <div>
    <div class="hiyBox ">
      <div class="yearBox">
        <el-steps :active="active" finish-status="wait" process-status="success" align-center>
          <el-step v-for="(con,kk) in Con" :key="kk" :title="con.year">
            <div>1</div>
          </el-step>
        </el-steps>
      </div>
      <div class="carousel">
        <el-carousel ref="carousel" :autoplay="true" @change="tt" height="650px">
          <el-carousel-item v-for="(con,index) in this.Con" :key="index">
            <img class="rr" :src="require(`@/assets/imgs/${con.img}`)" width="100%" height="100%" alt srcset />
            <div class="news">
              <p>{{con.news}}</p>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    Con: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      active: 0
    };
  },
  methods: {
    setActiveItem(index) {
      this.$refs.carousel.setActiveItem(this.active);
    },
    tt(year) {
      this.active = year;
    }
  }
};
</script>

<style lang="sass" scoped>
@import "../../assets/css/frx/common.css"

.hiyBox
    position: relative

    .yearBox
        position: absolute
        padding: 30px 0 50px
        width: 100%
        z-index: 99999
        background-image: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,0) )
    .carousel
        .news
            width: 84%
            font-size: 20px
            position: absolute
            bottom: 30px
            z-index: 9999999
            background-image: linear-gradient(to  right , rgba(0,0,0,.8) 20%, rgba(0,0,0,0) )
            color: #fff
            p
                padding: 20px
                    
</style>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>